<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图书信息</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
      padding: 20px;
    }



    h1 {
      color: #4287f5;
      text-align: center;
      margin-bottom: 30px;
    }

    label {
      font-weight: bold;
    }

    input[type="text"] {
      padding: 8px;
      border-radius: 4px;
      border: 1px solid #ddd;
      margin-right: 10px;
    }

    button {
      padding: 8px 16px;
      border-radius: 4px;
      background-color: #4287f5;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: #3667c2;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #4287f5;
      color: #fff;
    }

    tr:hover {
      background-color: #f5f5f5;
    }

    .out-of-stock {
      color: #f00;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div id="app">
  <h1>已借阅图书</h1>

  <div>
    <label for="searchTitle">按书名查询：</label>
    <input v-model="searchTitle" type="text" id="searchTitle">
    <button @click="searchByTitle">查询</button>
    <button @click="returnIndex">返回主页</button>
  </div>

  <table>
    <tr>
      <th>书名</th>
      <th>作者</th>
      <th>出版社</th>
      <th>类型</th>
      <th>状态</th>
      <th>简介</th>
      <th>操作</th>
    </tr>
    <tr v-for="book in borrowedBooks" :key="book.title">
      <td>{{ book.title }}</td>
      <td>{{ book.author }}</td>
      <td>{{ book.publisher }}</td>
      <td>{{ getCategoryName(book.categoryId) }}</td>
      <td :class="{'out-of-stock': book.stock === 0}">{{ getStockStatus(book.stock) }}</td>
      <td>{{ book.description }}</td>
      <td>
        <button @click="returnBook(book)">归还</button>
      </td>
    </tr>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      books: [],
      borrowedBooks: [],
      searchTitle: '', // 保存搜索输入框的值
    },
    methods: {
      searchByTitle() {
        // 发送按书名查询图书的AJAX请求
        $.ajax({
          url: "/user/getBorrowBooksByTitle",
          type: "GET",
          data: { title: this.searchTitle }, // 将搜索书名作为参数传递
          success: (data) => {
            this.borrowedBooks = data;
          }
        });
      },
      returnBook(book) {
        if (confirm("确定要归还该图书吗？")) {
          // 发送归还图书的AJAX请求
          $.ajax({
            url: "/user/returnBook",
            type: "POST",
            data: JSON.stringify(book),
            dataType: "JSON",
            contentType: "application/json;charset/utf-8",
            success: (json) => {
              console.log(json);
              this.searchByTitle();
            }
          });
        }
      },
      returnIndex(){
        location.href= "user_index.html";
      },
      getCategoryName(categoryId) {
        switch (categoryId) {
          case 1:
            return "文学类";
          case 2:
            return "历史类";
          case 3:
            return "计算机类";
          case 4:
            return "科学类";
          case 5:
            return "生活杂志";
          case 6:
            return "南昌时尚";
          case 7:
            return "食品安全";
          default:
            return "医学类";
        }
      },
      getStockStatus(stock) {
        return stock === 0 ? "库存短缺" : "库存充足";
      }
    },
    mounted() {
      // 页面加载时显示已借阅的图书
      $.ajax({
        url: "/user/getBorrowBooks",
        type: "GET",
        success: (data) => {
          this.borrowedBooks = data;
        }
      });
    }
  });
</script>

</body>
</html>
